<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!--<%@ taglib prefix="c1" uri="http://java.sun.com/jstl/core_rt"%>-->
<html>
<head>
	<base href="${pageContext.request.contextPath}/">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet"/>


<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">

	$(function(){
		//给”创建“按钮添加单击事件
		$("#createTranBtn").click(function(){
			window.location.href = "workbench/transaction/save.do";
		});
		//当交易主页面加载完成，查询所有数据的第一页以及所有数据的总条数，默认每页显示10条；
		queryTranByConditionForPage(1,10);

	});
	//定义分页查询函数
	function queryTranByConditionForPage(pageNo,pageSize){
		//收集数据
		var owner = $.trim($("#query-owner").val());
		var name = $.trim($("#query-name").val());
		var customerName = $.trim($("#query-customerName").val());
		var stage = $.trim($("#query-stage option:selected").text()); //获取被选中option的内容
		var type = $.trim($("#query-transactionType option:selected").text()); //获取被选中option的内容
		var source = $.trim($("#query-source option:selected").text()); //获取被选中option的内容
		var contactName = $.trim($("#query-contactName").val());
		var beginNo = (pageNo - 1) * pageSize;
		//发送请求
		$.ajax({
			url:"workbench/transaction/queryTranByConditionForPage.do",
			data:{
				owner,name,customerName,stage,type,source,contactName,beginNo,pageSize
			},
			type:"post",
			dataType:"json",
			success:function(data){
				//遍历tranList，拼接所有数据
				let htmlStr = "";
				$.each(data.tranList,function(index,obj){
					htmlStr+="<tr>";
					htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
					htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/transaction/detailTran.do?id="+obj.id+"';\">"+obj.name+"</a></td>";
					htmlStr+="<td>"+obj.customerId+"</td>";
					htmlStr+="<td>"+obj.stage+"</td>";
					htmlStr+="<td>"+obj.type+"</td>";
					htmlStr+="<td>"+obj.owner+"</td>";
					htmlStr+="<td>"+obj.source+"</td>";
					htmlStr+="<td>"+obj.contactsId+"</td>";
					htmlStr+="</tr>";
				});
				$("#tBody").html(htmlStr);
				//每次渲染时，使全选按钮不选中
				$("#checkAll").prop("checked",false);

				//计算总页数
				var totalPages = data.totalRows % pageSize == 0 ? data.totalRows/pageSize:parseInt(data.totalRows/pageSize)+1;

				//bs_pagination翻页插件
				$("#demo_page1").bs_pagination({
					currentPage: pageNo,//当前页号,相当于pageNo
					rowsPerPage: pageSize,//每页显示条数，相当于pageSize
					totalRows: data.totalRows,//总条数
					totalPages: totalPages,//总页数

					visiblePageLinks: 5,//最多可以显示的卡片数

					showGoToPage: true,//是否显示“跳转到”部分，默认true--显示
					showRowsPerPate: true,//是否显示“每页显示条数”部分，默认true--显示
					showRowsInfo: true,//是否显示记录的信息，默认true--显示
					onChangePage:function(event,pageObj){
						queryTranByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
					}
				});
			}
		});
	}
</script>
</head>
<body>



	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>交易列表</h3>
			</div>
		</div>
	</div>

	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">

			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="query-owner">
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="query-name">
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">客户名称</div>
				      <input class="form-control" type="text" id="query-customerName">
				    </div>
				  </div>

				  <br>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">阶段</div>
					  <select class="form-control" id="query-stage">
						  <option></option>
						<c:forEach items="${stageList}" var="stage">
							<option value="${stage.id}">${stage.value}</option>
						</c:forEach>
					  </select>
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">类型</div>
					  <select class="form-control" id="query-transactionType">
					  	<option></option>
						  <c:forEach items="${transactionTypeList}" var="transactionType">
							  <option value="${transactionType.id}">${transactionType.value}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">来源</div>
				      <select class="form-control" id="create-clueSource" id="query-source">
						  <option></option>
						  <c:forEach items="${sourceList}" var="source">
							  <option value="${source.id}">${source.value}</option>
						  </c:forEach>
						</select>
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">联系人名称</div>
				      <input class="form-control" type="text" id="query-contactName">
				    </div>
				  </div>

				  <button type="submit" class="btn btn-default" id="query-tranBtn">查询</button>

				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 10px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="createTranBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" onclick="window.location.href='edit.html';"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>


			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="checkAll"/></td>
							<td>名称</td>
							<td>客户名称</td>
							<td>阶段</td>
							<td>类型</td>
							<td>所有者</td>
							<td>来源</td>
							<td>联系人名称</td>
						</tr>
					</thead>
					<tbody id="tBody">

					</tbody>
				</table>
				<div class="col-md-12" id="demo_page1"></div>
			</div>

		</div>

	</div>
</body>
</html>
